<template>
    <el-dialog v-model="visible" :width="props.width" :fullscreen="props.fullscreen" 
        :top="props.top" :modal="props.modal"
        :append-to-body="props.appendToBody" :destroy-on-close="props.destroyOnClose" :close-on-click-modal="false"
        :class="props.customClass" @close="handleClose"
        :style="{
            background: 'rgba(255, 255, 255, 0.3)',
            backdropFilter: 'blur(5px)'
            }">
        <slot></slot>
        <template #header v-if="showFooter">
            <div :style="{color: theme === 'light' ? '#000' : '#fff'}">
                {{ props.title }}
            </div>
        </template>
        <template #footer v-if="showFooter">
            <slot name="footer">
                <el-button @click="handleCancel">{{ props.cancelText }}</el-button>
                <el-button type="primary" @click="handleConfirm">{{ props.confirmText }}</el-button>
            </slot>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { defineComponent, ref, watch, getCurrentInstance, computed } from 'vue'
import utils from '../../utils/utils';

const props = defineProps(
    {
        modelValue: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: '提示'
        },
        width: {
            type: String,
            default: '60%'
        },
        fullscreen: {
            type: Boolean,
            default: false
        },
        top: {
            type: String,
            default: '10vh'
        },
        modal: {
            type: Boolean,
            default: true
        },
        appendToBody: {
            type: Boolean,
            default: true
        },
        destroyOnClose: {
            type: Boolean,
            default: false
        },
        showFooter: {
            type: Boolean,
            default: true
        },
        cancelText: {
            type: String,
            default: '取消'
        },
        confirmText: {
            type: String,
            default: '确定'
        },
        customClass: {
            type: String,
            default: 'transparent-dialog'
        }
    }
);
defineEmits(['update:modelValue', 'close', 'cancel', 'confirm']);
const visible = ref(props.modelValue);
//主题控制light  dark
const theme = utils.getTheme();
const { proxy } = getCurrentInstance() as any; 

watch(() => props.modelValue, (val) => {
    visible.value = val
})

watch(visible, (val) => {
    proxy.$emit('update:modelValue', val)
})

const handleClose = () => {
    proxy.$emit('close')
}

const handleCancel = () => {
    visible.value = false
    proxy.$emit('cancel')
}

const handleConfirm = () => {
    proxy.$emit('confirm')
}
</script>

<style scoped>
</style>